<template>
  <div class="main" @scroll="homeScroll">
    <head-img v-show="headShow" />
    <carousel autoPlay delay="3000" show />
    <kanjia />
    <jingxuan />
    <renqi />
  </div>
</template>

<script>
  import carousel from "@/components/Carousel"
  import kanjia from "@/components/kanjia"
  import headImg from "@/components/header"
  import jingxuan from "@/components/jingxuan"
  import renqi from "@/components/renqi"

  export default {
    name: "Home",
    components: {
      carousel,
      kanjia,
      headImg,
      jingxuan,
      renqi,
    },
    data() {
      return {
        imgs: [],
        headShow: false,
      }
    },
    methods: {
      homeScroll(e) {
        if (e.target.scrollTop > 300) {
          this.headShow = true
        } else {
          this.headShow = false
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  .main {
    height: calc(100% - 1rem);
    overflow-y: auto;
    &::-webkit-scrollbar {
      display: none;
    }
  }
</style>
